<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <block name="title">
        <title>{$video.title} - {:C('WEB_SITE_TITLE')}</title>
    </block>
    <meta name="keywords" content="{:C('WEB_SITE_KEYWORD')}">
    <meta name="description" content="{:C('WEB_SITE_DESCRIPTION')}">
    <link rel="shortcut icon" href="__ASSET__/favicon.ico">

    <script type="text/javascript" src="__ASSET__/Home/player/match/js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="__ASSET__/Home/ui3/js/lib/knockout-2.3.0.js"></script>
    <script type="text/javascript" src="__ASSET__/Home/ui3/js/jwplayer/jwplayer.js?v=1.0"></script>
    <script type="text/javascript">
        {:C('GLOBAL_BDHM')}
    </script>

    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
    <!--
        html, body {
        position: relative;
        height: 100%;
        }
        html {
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
        }
        body{
          font-family:sans-serif 'Microsoft Yahei','Helvetica Neue', Helvetica, Arial, 'Hiragino Sans GB', 'Heiti SC', 'WenQuanYi Micro Hei';
          margin: 0;
          color: #666;
          font-size: 13px;
        }
        body * {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
          -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
          -webkit-font-smoothing: antialiased;
        }
        img {
          width: auto\9;
          height: auto;
          max-height: 100%;
          max-width: 100%;
          vertical-align: middle;
          -ms-interpolation-mode: bicubic;
        }
        em{
          font-style: normal;
        }
        .video-box{
          margin: 0 auto;
          width: 100%;
          background: #292929;
          position: relative;
        }
        /*弹窗*/
        .popbg{
            background: rgba(51,51,51,.5);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 2;
            height: 100%;
            display: block;
        }
        #myPopup{
            background: rgba(51,51,51,.5);
            width: 84%;
            left: 8%;
            top: 13%;
            color: #fff;
            padding: 20px;
            display: block;    
            z-index: 4;
            position: absolute;
        }
        .related-videos{
          width: 70%;
          float: left;
        }

        .row-right{
          width: 30%;
          float: left;
          position: relative;
        }
        .related-videos li{
            float: left;
            width: 47%;
            overflow: hidden;
            padding: 0 10px 10px 0;
        }
        .related-videos li>a{
            width: 100%;
            height: 100%;
            display: inline-block;
            overflow: hidden;
        }
        .related-videos li:nth-child(2n){
            margin-right: 0;
        }
        .related-videos li:nth-child(n+3){
            padding-bottom: 0;
        }
        .related-videos>h1,
        .row-right h1{
            font-size: 14px;
            margin: 0;
            padding: 0 0 10px;
        }
        .related-video-img{
            background: rgba(0,0,0,.5);
            vertical-align: middle;
            text-align: center;
            display: inline-block;
            position: relative;
            width: 100%;
            height: 100%;
        }
        .related-video-img>img{
            margin: auto;
            display:block; 
        }
        .related-video-name{
            background: rgba(0,0,0,.5);
            font-size: 12px;
            text-align: center;
            color: #fff;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 0 5px;
            height: 26px;
            line-height: 26px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .row-right h1{
            text-align: center;
            font-size: 12px;
            font-weight: normal;
        }
        .row-right p{
            width: 100%;
            display: inline-block;
            text-align: center;
            margin: 0;
        }
        .row-right p>img{
            width: 80%;
            margin: 0 auto
        }
        .replay{
            font-size: 14px;
            text-align: center;
            padding-top: 20px;
            display: inline-block;
            width: 100%;
            cursor: pointer;
        }
        .row-right:before{
            width: 1px;
            height: 90%;
            content: "";
            position: absolute;
            background: #ccc;
            left: -8px;
            top: 15%;
        }
        .replay>img{
            margin: -8px 10px 0 0;
            width: 20px;
        }
    -->
    </style>

    <script type="text/javascript">
        window._COMMON = {
            PUBLIC : "__ASSET__",
        };
        function dataInit() {
            var recommendUrl = "{:U('VideoPlay/recommend', ['game_id' => $video['game_id']])}";
            $.get(recommendUrl, function(data) {
                if (data.state == 0) {
                    var list = [];
                    $.each(data.data, function(index, el) {
                        var video = el;
                        video.videoLink = "/video-"+el.id;
                        list.push(video);
                    });
                    viewModel.recommend(list);
                }
            });

        }
        function getVideoSource(video) {
            var list = [];
            if (video.dpi_levels && video.dpi_levels.length > 0) {
                $.each(video.dpi_levels, function(index, el) {
                    list.push({
                        label : el.dpi,
                        file : el.uri,
                        default : false,
                    });
                });
            }
            list[list.length-1].default = true;
            // if (list.length > 1) {
            //     list[1].default = true;
            // }
            return list;
        }
        function initPlayer() {
            var video = {$video|json_encode};
            jwplayer("mod_player").setup({
                flashplayer: _COMMON.PUBLIC+"/Home/ui3/js/jwplayer/jwplayer.flash.swf",
                image: "{$video['thumb']}",
                sources: getVideoSource(video),
                controlbar: "over",  //控制条位置
                screencolor: "#fff",   //播放器颜色
                // stretching: "fill",    //画面自适应
                repeat:false,       //重复播放
                autostart:{$autoplay},         //自动播放
                events:{
                    onComplete: function(e){ 
                        viewModel.recommendShow(true);
                    },
                    onReady:function(){
                    }
                },
                width: "100%",
                aspectratio: "16:9",
            });
        }
        var replay = function() {
            viewModel.recommendShow(false);
            jwplayer(0).play(true);
        }
        var viewModel;
        $(function(){
            viewModel = $.extend({}, viewModel, {
                recommendShow : ko.observable(false),
                recommend : ko.observableArray([]),
            });
            ko.applyBindings(viewModel);
            initPlayer();
            // dataInit();
        });
        var played = true;
        var setPlayUrl = "{:U('/Api/Video/setPlay', array('id' => $video['id'], 'appid' => $appid))}";
        if (!played) {
            $.get(setPlayUrl);
            played = true;
        }

    </script>
</head>
<body>
<div class="video-box">
    <div id="mod_player"></div>
     <!--视频播放完成弹窗S-->
    <!-- ko if:recommendShow() -->
    <div id="myPopup">
        <div class="related-videos">
            <h1><em>相关视频</em></h1>
            <ul data-bind="foreach:recommend">
                <li>
                    <a href="" data-bind="attr:{'href':videoLink}" target="_blank">
                        <div class="related-video-img">
                            <img src="" data-bind="attr:{'src':thumb}"/>
                            <span class="related-video-name" data-bind="text:title"></span>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="row-right relative">
            <h1>下载66Play APP 精彩不错过</h1>
            <p><img src="__ASSET__/Home/player/match/images/erweima.png"/></p> 
            <span class="replay" onclick="replay()">
                <img src="__ASSET__/Home/player/match/images/replay.png"/>重播
            </span>
        </div>
    </div>
    <div class="popbg"></div>
    <!-- /ko -->
    <!--视频播放完成弹窗E-->
</div>
</body>
</html>
<script type="text/javascript">
    var listWidth=$(".video-box").width();
    var relatWidth=$(".related-videos li").width();
    $(".video-box").height(listWidth*9/16);
    $(".related-videos li").height(relatWidth*9/16);

</script>